<template>
  <div>
    <h3>小目标列表</h3>
    <h5>添加小目标</h5>
    <input
      type="text"
      placeholder="输入小目标后，按回车确认"
      v-model="Text"
      @keydown.13="enter"
    />
    <p>
      共有：{{ list.length }}个目标，已完成：{{ done.length }}，还有：{{
        doing.length
      }}条未完成
    </p>
    <input type="radio" checked="true" name="change" @click="chose(1)" />
    <label>所有目标</label>
    <input type="radio" name="change" @click="chose(2)" />
    <label>已完成目标</label>
    <input type="radio" name="change" @click="chose(3)" />
    <label>未完成目标</label>
    <div class="list">
      <ul>
        <li
          v-for="(item, i) in list"
          :key="i"
          :class="cur === i ? 'active' : ''"
          @mousemove="move(i)"
          @mouseleave="leave"
        >
          <input type="checkbox" :checked="item.status" @click="change(i)" />
          <span>{{ item.name }}</span>
          <span :class="cur == i ? 'del' : 'none'" @click="del(i)">X</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          name: "HTML5",
          status: false,
        },
        {
          name: "CSS3",
          status: true,
        },
        {
          name: "vue",
          status: false,
        },
        {
          name: "react",
          status: false,
        },
      ],
      doing: [],
      done: [],
      cur: -1,
      Text: "",
      curType: 1,
    };
  },
  methods: {
    //添加
    enter() {
      this.list.push({
        name: this.Text,
        status: false,
      });
      this.Text = "";
    },
    // 删除
    del(i) {
      this.list.splice(i, 1);
    },
    move(i) {
      this.cur = i;
    },
    leave() {
      this.cur = -1;
    },
    chose(type) {
      this.curType = type;

      if (type == 1) {
        this.list = JSON.parse(localStorage.getItem("list"));
      }
      if (type == 2) {
        this.list = this.done;
      }
      if (type == 3) {
        this.list = this.doing;
      }
    },
    change(i) {
      this.list[i].status = !this.list[i].status;
      localStorage.setItem("list", JSON.stringify(this.list));
    },
    ListFilter() {
      this.newlist = JSON.parse(localStorage.getItem("list"));
      this.newlist.forEach((item) => {
        if (item.status == false) {
          this.doing.push(item);
        } else {
          this.done.push(item);
        }
      });
    },
  },
  created() {
    localStorage.setItem("list", JSON.stringify(this.list));
    this.ListFilter();
  },
};
</script>

<style lang="scss" scoped>
li {
  width: 500px;
  height: 30px;
  .del {
    float: right;
  }
}
.active {
  border: 1px solid #ccc;
}
.none {
  display: none;
}
</style>